<template>
  <div class="app">
    <h3>我是App组件</h3>
    <!-- <Child/> -->
    <Suspense>
      <template v-slot:default> <!--default插槽指定真正要展示的组件-->
        <Child/>
      </template>
      <template v-slot:fallback> <!--fallback插槽指定组件未加载完成时的兜底内部-->
        <h3>加载中...请稍后...</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
/*
  静态引入
  效果：Child组件和App组件一定是一起加载出来的
  容易导致一个问题：父组件必须等待子组件加载完成后才进行加载，如果某个子组件加载很慢，整个页面长时间白屏
*/
// import Child from './components/Child.vue'

/*
  动态引入(异步引入)，defineAsyncComponent函数需要传入一个回调函数，回调返回的结果是一个import函数返回的结果
  效果：App组件加载早于Child组件
  可以实现部分加载，早加载的组件早显示，但是也存在一个问题：如果用户网速很慢，后加载的组件一直不显示，让用户误以为没有这个组件
  此时可以用vue3的Suspense组件（相当于插槽）进行占位，当组件未加载完成时展示兜底数据，加载完成后再展示组件真实内容
  PS1：测试时将浏览器的节流模式设置为高速3G，并停用缓存；或者将异步Child组件setup返回promise实例，也能实现延迟加载的效果（注意只有异步组件配合Suspense可以返回promise）
  PS2：Suspense目前是vue3的实验特性，之后可能有改动
*/
import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(()=>{
  return import('./components/Child.vue')
})

export default {
  name: 'App',
  components: {
    Child,
  },
  setup() {
    return {}
  }
}
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>
